/**
 * 动画添加
 * @param element 元素
 * @param duration 动画时间
 * @param styles width | height
 * @returns 取消监听函数
 */
export default function useElementTransition(
  element: HTMLElement | string,
  duration: number,
  styles: "width" | "height"
) {
  const el =
    typeof element === "string"
      ? (document.querySelector(element) as HTMLElement)
      : element;
  if (!el) return;
  el.style.height = "auto";
  el.style.transition = `${styles} ${duration / 1000}s ease-in-out`;
  const children = el.children[0] as HTMLElement;
  const res = new ResizeObserver((entries) => {
    const value = entries[0].contentRect;
    setTimeout(() => {
      el.style[styles] = value[styles]+'px';
    });
  });
  res.observe(children);
  return res.unobserve;
}
